<template>
	<view>
		<unitv-page id="playPage" :show="true" ref="playPage">
			<view class="movie-contain">
				<unitv-video id="player" class="player" src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" :autoplay="true">
				</unitv-video>
				<view class="movie-inter">
					<view class="movie-title">标题标题标题标题标题标题<text class="movie-year">(2021)</text></view>
					<view class="movie-info"><text>语言：国语</text><text>地区：大陆</text><text>类型：国产剧</text></view>
					<view class="movie-info">主演：宋轶 郭麒麟</view>
					<view class="movie-content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</view>
					<view>
						<unitv-zone id="btn-zone" :autoFous="true" :column="2" down="list-zone" :item="0" :values="[0,1]" class="btn-zone">
							<unitv-item :item="0" class="fullscreen-btn" @click="switchFullScreen">
								<image mode="aspectFit" src="../../static/fullscreen.png"></image>
								<view>全屏播放</view>
							</unitv-item>
							<unitv-item :item="1" class="favicon-btn">
								<image mode="aspectFit" src="../../static/favicon.png"></image>
								<view>收藏</view>
							</unitv-item>
						</unitv-zone>
					</view>
				</view>
			</view>
			<unitv-zone id="list-zone" class="list-zone" up="btn-zone" :values="item" :column="8">
				<unitv-item v-for="(a,index) in item" :item="index" :key="index" class="item">第{{a}}集</unitv-item>
			</unitv-zone>
		</unitv-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				status:0,
				handEvt:false,
				currentTime:0
			}
		},
		onReady() {
			this.viderContext = uni.createVideoContext("player");
		},
		methods: {
			switchFullScreen() {
				this.viderContext.requestFullScreen();
			}
		}
	}
</script>

<style>
	page {
		background-color: #070707;
		background-image: linear-gradient(0deg, #222222 0%, #1f1f1f 51%, #1d1d1d 75%);
		color: white;
		padding: 10rpx;
	}

	.movie-contain {
		display: flex;
		flex-direction: row;
	}

	.player {
		width: 375rpx;
		height: 200rpx;
	}

	.movie-inter {
		width: 355rpx;
		padding: 0 10rpx;
	}

	.movie-title {
		font-size: 18rpx;
		padding-bottom: 5rpx;
	}

	.movie-year {
		padding-left: 5rpx;
	}

	.movie-year,
	.movie-info,
	.movie-content {
		font-size: 16rpx;
		color: #dadade;
		line-height: 28rpx;
	}

	.movie-content {
		text-overflow: -o-ellipsis-lastline;
		/* overflow: hidden; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 20rpx;
		margin-bottom: 10rpx;
	}

	.btn-zone {
		display: flex;
		flex-direction: row;
	}

	.fullscreen-btn,
	.favicon-btn {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
		background: #3e3e3e;
		font-size: 12rpx;
		border-radius: 2rpx;
		text-align: center;
	}

	.fullscreen-btn image,
	.favicon-btn image {
		width: 22rpx;
		height: 32rpx;
	}
	.list-zone {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
		margin-bottom: 50rpx;
		align-items: center;
		padding: 5px;
	}

	.item {
		width: 82rpx;
		height: 30rpx;
		margin: 5rpx;
		text-align: center;
		background-color: #6b6b6b;
		border-radius: 5rpx;
		align-items: center;
		display: flex;
		justify-content: center;
		font-size: 12rpx;
	}
	.item-hover {
		zoom: 0;
		background: #DD524D
	}
</style>
